<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800">
      <BasicTable  @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
      <!--字段回显插槽-->
      <template v-slot:bodyCell="{ column, record, index, text }">
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {BasicTable, useTable, TableAction} from '/@/components/Table';
    import { useListPage } from '/@/hooks/system/useListPage'
    import {mealsOrderDetailColumns} from '../CsPurchaseMealsOrder.data';
    import {queryDetailByid} from '../CsPurchaseMealsOrder.api';
    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);
     let tabelData= ref([]);
 
    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        //重置表单
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        // 隐藏底部时禁用整个表单
          isUpdate.value = !!data?.isUpdate;
           queryDetailByid({id:data.record.id}).then(res=>{
            console.log(res);
             tabelData.value=res;
        });

    });
    //设置标题
    const title = computed(() => (!unref(isUpdate) ? '购买餐费详情' : '购买餐费详情'));

     const { prefixCls,tableContext } = useListPage({
      tableProps:{
           columns:mealsOrderDetailColumns,
           canResize:false,
           dataSource:tabelData,
           showTableSetting:false,
           showActionColumn:false,
           formConfig: {
              //labelWidth: 120,
              showActionButtonGroup:false
            },
           actionColumn: {
               width: 120,
               fixed:'right'
            },
            beforeFetch: (params) => {
              return Object.assign(params, queryParam);
            }
      }
  })

  const [registerTable] = tableContext




    
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>